<template>
  <div id="app">
     <mt-header fixed title="传智播客.黑马程序员Vue商城系统"></mt-header>
      <!-- 返回按钮 -->
      <div class="backto" v-show="isshow">
        <a href="#" @click="goback"><返回</a>
      </div>
		<router-view></router-view>
      <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" to="/home">
              <span class="mui-icon mui-icon-home"></span>
              <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/huiyuan">
              <span class="mui-icon mui-icon-email"></span>
              <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link class="mui-tab-item" to="/shopcar">
              <span class="mui-icon mui-icon-contact"><span id="showcar" class="mui-badge">0</span></span>
              <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/search">
              <span class="mui-icon mui-icon-gear"></span>
              <span class="mui-tab-label">搜索</span>
            </router-link>
      </nav>

  </div>
</template>

<script>
  import {vm,COUNTS} from './car.js'
export default {
  data() {
    return {
      isshow: '',
    };
  },
  created(){            //在钩子函数中调用
    vm.$on(COUNTS,function(input){
      //console.log(input)
      var el = document.getElementById('showcar')
      el.innerText = input + (el.innerText-0);
    })
  },
  watch:{
    '$route':function(newstr,oldstr){
        if(newstr.path == "/home"){
          this.isshow = false;
        }else{
          this.isshow = true;
        }
    }
  },
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
};
</script>

<style>
.backto {
  position: fixed;
  top:10px;
  left: 15px;
  z-index: 1000;
}
.backto a {
  color: #fff;

}
</style>
